import AppHeader from '../app-header/AppHeader.vue';
import {action} from '@storybook/addon-actions';

export default {
  title: '校园物联/页眉',
  component: AppHeader,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、element-plus-icons、tailwindcss</span> 使用`
      }
    }
  },
  argTypes: {
    backBtn: {description: '返回按钮'},
    title: {description: '标题'},
    subtitle: {description: '副标题'},
    desc: {description: '描述'},
    back: {description: '返回事件，无参数。VueRouter项目默认返回上一页面，否则需自定义该事件'},
    'back-btn': {description: '按钮部分'},
    'title-extra': {description: '标题右部分'},
    'desc-extra': {description: '描述右部分'},
    default: {description: '整个右部分'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {AppHeader},
    setup() {
      return {args};
    },
    template: '<AppHeader v-bind="args" @back="handleBack" style="width: 800px"/>',
    methods: {
      handleBack: action('back')
    }
  }),
  args: {
    backBtn: true,
    title: '标题',
    subtitle: '副标题',
    desc: '描述信息描述信息描述信息描述信息描述信息描述信息',
  }
};